<template>
	<view class="contant">
		<view class="font-36 font-weight">登录/注册</view>
		<view class="" style="margin-top: 180rpx;">
			<view class="inputBox">
				<input type="tel" maxlength="11" v-model="form.mobile" placeholder="请输入手机号" placeholder-class="font-28 grey">
			</view>
			<view class="inputBox flex_b m-t-60">
				<input type="text" v-model="form.captcha" placeholder="请输入验证码" placeholder-class="font-28 grey">
				<view class="f-t" style="width: 300rpx;" @click="getCode">{{tips||'获取验证码'}}</view>
			</view>
			<view class="flex m-t-30 m-b-60" @click="xyShow=!xyShow">
				<view v-if="!xyShow" class="iconfont icon-yuanxingweixuanzhong grey m-r-10" style="font-size: 26rpx;">
				</view>
				<view v-else class="iconfont icon-31xuanzhong f-t m-r-10" style="font-size: 26rpx;"></view>
				<view class="font-24"><text class="grey">我已阅读并同意PairUp</text>
				<text >《用户协议》</text>、
				<text >《隐私条款》</text>
				</view>
			</view>

			<button type="primary" @click="$util.redirectTo('/uni_modules/chenzuheng-online-exam/pages/exam')">手机号登录/注册</button>
			<uv-code :seconds="seconds" @end="end" @start="start" ref="code" @change="codeChange"></uv-code>
		</view>
		
		<uv-popup ref="popup" round="20">
			<scroll-view scroll-y="true" class="scrollSty">
				<view style="display: flex;flex-direction: column;" v-html="content">
				
				</view>
			</scroll-view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seconds: 60,
				tips: '',
				xyShow: false,
				article:{},
				form: {
					mobile: '',
					captcha: '',
					code: '',
					invite_id: ''
				},
				content:'',
				articleA:'',
				articleB:'',
				
			};
		},
		onLoad() {
			this.articleFnA('用户协议')
			this.articleFnB('隐私条款')
		},
		methods: {
			openFn(type) {
				if(type=='xy') {
					this.content = this.articleA
				}else {
					this.content = this.articleB
				}
				this.$refs.popup.open('center');
			},
			articleFnA(type) {
				this.$api.sendRequest({
					url:'/api/Index/article',
					data:{
						type:type
					},success:res=>{
						this.articleA = res.data.content
					}
				})
			},
			articleFnB(type) {
				this.$api.sendRequest({
					url:'/api/Index/article',
					data:{
						type:type
					},success:res=>{
						this.articleB = res.data.content
					}
				})
			},
			loginFn() {
				if(!this.form.mobile) {
					uni.showToast({
						title:'请输入手机号',
						icon:'error'
					})
					return 
				}
				let Regular = /^1[3456789]\d{9}$/
				if (!Regular.test(this.form.mobile)) {
					uni.showToast({
						title: '请正确输入手机号',
						icon: "none"
					})
					return
				}
				if(!this.form.captcha) {
					uni.showToast({
						title:'请输入验证码',
						icon:'error'
					})
					return 
				}
				
				if (this.xyShow) {
					uni.login({
						provider: 'weixin', //使用微信登录
						success: loginRes => {
							this.form.code = loginRes.code
							this.$api.sendRequest({
								url: '/api/user/mobilelogin',
								data: this.form,	
								success: res => {
									if (res.data.token) {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
										// 本地存贮
										uni.setStorage({
											key: 'token',
											data: res.data.token,
											success: (resA) => {
												setTimeout(() => {
													uni.hideLoading();
													uni.navigateBack({
														delta:2
													})
												}, 1000);
											}
										});
									} else {
										uni.hideLoading();
										uni.showToast({
											title: res.msg
										})
									}
								}
							})
						}
					})
				} else {
					uni.showToast({
						title: '请先勾选用户协议',
						icon: 'error'
					})
					return
				}
			},

			codeChange(text) {
				this.tips = text
			},
			getCode() {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					// uni.$uv.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.code.start();
				}, 2000);

			},
			end() {
				// uni.$uv.toast('倒计时结束');
			},
			start() {
				// uni.$uv.toast('倒计时开始');
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.scrollSty {
		max-height: 760rpx;
		width: 450rpx;
		min-height: 450rpx;
		padding: 25rpx;
		background-color: #fff;
		border-radius: 20rpx;
		view {
			 word-wrap: break-word; /* 允许单词内断行 */
			  white-space: normal;   /* 处理空白符，自动换行 */
		}
	}
	.contant {
		padding: 200rpx 40rpx;
	}

	.inputBox {
		padding-bottom: 25rpx;
		padding-left: 10rpx;

		input {
			width: 100%;
		}

		border-bottom: 2rpx solid #F5F5F5;
	}
</style>
